<template>
  <div>
    <p>您输入的地址有误，请重新输入</p>
    <hr>
    <input type="text" placeholder="请输入邀请码" v-model="code">
    <hr>
    <!-- a标签是页面之间的跳转；router-link是组件间的切换 -->
    <p>通过内置组件导航（声明式导航）：</p>
    <!-- 当页面地址和router-link的地址匹配时，会添加`router-link-exact-active router-link-active`这两个class,作用就是通过css样式突出显示当前页面 -->
    <!-- tag:指定router-link以什么标签显示，默认是a标签 -->
    <!-- replace：替换历史记录，而不是新增 -->
    <router-link :to="'/?code='+this.code" active-class="class666" tag="button">返回首页</router-link>
    <router-link :to="url1" tag="button">查看大组件</router-link>
    <router-link :to="{path: url2}" tag="button">查看父组件</router-link>
    <!-- name:命名路由。当path很长的时候，可以使用name代替path。效果一致，浏览器显示的还是path -->
    <router-link :to="{name: 'd'}" tag="button">查看day04组件</router-link>
    <hr>
    <p>编程式导航：</p>
    <button @click="jump('/')">返回首页</button>
    <button @click="jump('/big')">查看大组件</button>
    <button @click="jump('/father')">查看父组件</button>
    <button @click="jump('/day04')">查看day04组件</button>
    <p>alias:路由别名。两个地址指向同一个页面，不会改变地址。重定向会修改地址！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url1: '/big',
      url2: '/father',
      code: ''
    }
  },
  methods: {
    // 编程式导航
    jump(url) {
      // 省略了一些逻辑
      // replace方法不常用
      // go方法，参数是非零整数
      // back方法，后退
      this.$router.push({
        path: url
      })
    }
  },
}
</script>

<style>

</style>